<template>
  <el-select v-model="curVal">
    <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
  </el-select>
  <div class="flex">
    <div class="item">
      <div class="title">type = label</div>
      <div class="content">
        <StatusLabel :options="options" :value="curVal" />
      </div>
    </div>
    <div class="item">
      <div class="title">type = tag</div>
      <div class="content">
        <StatusLabel :options="options" :value="curVal" mode="tag" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { StatusLabel } from '..';
import { ElSelect, ElOption } from 'element-plus';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: { StatusLabel, ElSelect, ElOption },
  setup() {
    const curVal = ref('5');
    const options = ref([
      {
        value: '1',
        label: '成功',
        color: 'success',
      },
      {
        value: '2',
        label: '失败',
        color: 'danger',
      },
      {
        value: '3',
        label: '警告',
        color: 'warning',
      },
      {
        value: '4',
        label: '文本',
        color: 'info',
      },
      {
        value: '5',
        label: '普通',
        color: 'primary',
      },
      {
        value: '6',
        label: '十六进制颜色',
        color: '#bcc0ff',
      },
      {
        value: '7',
        label: '未知',
        color: '123123123',
      },
    ]);
    return {
      options,
      curVal,
    };
  },
});
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  padding: 10px;
  margin-top: 50px;
  border: 1px solid #f0f0f0;

  .item {
    width: 200px;

    .title {
      font-weight: 600;
    }

    .content {
      padding-top: 10px;
    }
  }
}
</style>
